/**
 * @desc 弹窗组件
 * @props { bool } destroyOnClose 关闭弹窗是否销毁元素
 * @props { string } title  弹窗标题
 * @props { string | number } footer  弹窗页脚显示状态
 * @props { null | bool } footer  弹窗宽度
 * @props { func } handleCancel 取消按钮事件
 * @props { func } handleOk 确定按钮事件
 */
import React from "react";
import { Modal, Button } from "antd";
import PropTypes from "prop-types";

class TheDialog extends React.Component {
  render() {
    const {
      visible,
      title,
      handleCancel,
      handleOk,
      children,
      width,
      footer,
      confirmLoading
    } = this.props;
    let footerEle = null;
    if (footer === null) {
      footerEle = null;
    } else if (footer) {
      footerEle = footer
    } else {
      footerEle = [
        <Button key="back" onClick={handleCancel}>
          取 消
        </Button>,
        <Button loading={confirmLoading} key="submit" type="primary" onClick={handleOk}>
          确 定
        </Button>
      ];
    }
    return (
      <Modal
        visible={visible}
        title={title}
        maskClosable={false}
        destroyOnClose={true}
        onCancel={handleCancel}
        centered={true}
        width={width}
        footer={footerEle}
      >
        {children}
      </Modal>
    );
  }
}
TheDialog.propTypes = {
  destroyOnClose: PropTypes.bool,
  title: PropTypes.string,
  width: PropTypes.number || PropTypes.string
};
TheDialog.defaultProps = {
  destroyOnClose: true,
  title: "提示",
  width: 800
};
export default TheDialog;
